
/* eslint-disable */
import React, { Component } from 'react';
import PropTypes from 'prop-types';//类型检测

class TodoItem extends Component{
    constructor(props){
        //在ES6中，在子类的constructor中必须先调用super才能引用this;super(props)的目的：在constructor中可以使用this.props
        super(props);
        this.handleClick=this.handleClick.bind(this) 
    }

    //一个组件要从父组件接受参数，只要父组件的render函数被执行，子组件的componentWillReceiveProps就会被执行
    componentWillReceiveProps(){
        console.log('child componentWillReceiveProps');
    } 

    //一个组件被移出元素就会被执行
    componentWillUnmount(){
        console.log('child componentWillUnmount');
    }

    //提升性能
    shouldComponentUpdate(nextProps,nextState){
        if(nextProps.content!==this.props.content){
            return true;
        }else{
            return false;
        }
    }

    render(){
        const { content } =this.props;
        return (
            <li 
                onClick={this.handleClick}
                dangerouslySetInnerHTML={{__html: content}}
            >
            </li>
        )
    }

    handleClick(){
        const { index } =this.props;
        this.props.delteItem(index)
    }
}

//规定数据类型
//PropTypes.oneOfType(PropTypes.string,PropTypes.number)是字符串或者数字，arrayOf或者的意思
//propTypes：属性校验，PropTypes：类
TodoItem.propTypes = {
    test: PropTypes.string.isRequired,
    content: PropTypes.string,
    delteItem: PropTypes.func,
    index: PropTypes.number
}

//规定默认值
TodoItem.defaultProps={
    test:'hello word'
}

export default TodoItem;